<template>
  <!-- 添加著作的对话框 ********************************** -->
  <el-dialog
    title="添加著作"
    :visible.sync="addDialogVisible"
    width="90%"
    @close="handleWorkAddDialogClose"
    center
    class="workAddDialog"
  >
    <span>
      <el-row :gutter="20">
        <el-col :span="14"
          ><div class="grid-content bg-purple">
            <el-form
              ref="workAddFormRef"
              :model="workAddForm"
              :rules="workAddFormRules"
              label-width="130px"
              size="mini"
            >
              <!--著作编号 -->
              <el-form-item label="著作编号" prop="no"
                ><el-input
                  placeholder="请输入著作编号"
                  v-model="workAddForm.no"
                ></el-input>
              </el-form-item>
              <!-- 著作名称 -->
              <el-form-item label="著作名称" prop="name">
                <el-input
                  placeholder="请输入著作名称"
                  v-model="workAddForm.name"
                ></el-input>
              </el-form-item>
              <!-- 著作作者 -->
              <el-form-item label="著作作者" prop="author">
                <el-input
                  @input="authorInputChange"
                  placeholder="多名著作者使用逗号分隔"
                  v-model="workAddForm.author"
                ></el-input>
              </el-form-item>
              <!--著作第一人类型 -->
              <el-form-item label="著作第一人类型" prop="author_type"
                ><el-input
                  placeholder="请输入著作第一人类型"
                  v-model="workAddForm.author_type"
                ></el-input>
              </el-form-item>
              <!-- 著作所属单位 -->
              <el-form-item label="著作所属单位" prop="affiliated_unit">
                <el-select
                  v-model="workAddForm.affiliated_unit"
                  placeholder="请选择作者所属单位"
                >
                  <el-option
                    v-for="item in collegeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--著作类别 -->
              <el-form-item label="著作类别" prop="copyright_category"
                ><el-input
                  placeholder="请输入著作类别"
                  v-model="workAddForm.copyright_category"
                ></el-input>
              </el-form-item>
              <!-- 著作时间 -->
              <el-form-item label="出版时间" prop="publish_time">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="workAddForm.publish_time"
                    style="width: 100%"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <!-- 著作权类型 -->
              <el-form-item label="著作权类型" prop="copyright_type">
                <el-select
                  v-model="workAddForm.copyright_type"
                  placeholder="请选择著作权类型"
                >
                  <el-option
                    v-for="item in copyright_typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 是否为国家规划教材 -->

              <el-form-item label="国家规划教材" prop="status" class="status">
                <el-switch
                  v-model="workAddForm.national_planning_textbook"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
                <span v-show="workAddForm.national_planning_textbook">是</span>
                <span v-show="!workAddForm.national_planning_textbook">否</span>
              </el-form-item>
              <!-- 学科分类 -->
              <el-form-item label="学科分类" prop="subject_classification">
                <!-- options是数据 -->
                <el-cascader
                  placeholder="请选择学科分类"
                  v-model="subject_classificationVal"
                  :options="subject_classificationList"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleSubject_classificationChange"
                ></el-cascader>
              </el-form-item>

              <el-form-item label="备注" prop="remarks">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="workAddForm.remarks"
                >
                </el-input>
              </el-form-item>
            </el-form></div
        ></el-col>
        <!-- 上传模块 -->
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-upload
              ref="workfileUploadRef"
              class="workUpload"
              :auto-upload="false"
              drag
              action="http://localhost:3000/work/upload"
              method="post"
              :on-change="checkType"
              :on-success="uploadSuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传.pdf文件，且不超过100mb
              </div>
            </el-upload>
          </div></el-col
        >
      </el-row>
    </span>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleWorkAddDialogConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      subject_classificationVal: [],
      // 作者单位学院信息
      awardee_unitVal: [],
      // 下达单位
      release_unitVal: [], // 控制添加著作对话框的显示与隐藏
      addDialogVisible: false, // 添加著作的表单数据
      workAddForm: {
        no: "",
        name: "",
        // 作者
        author: "",
        // 作者类型
        author_type: "",
        // 著作所属单位
        affiliated_unit: "",
        // 出版时间
        publish_time: "",
        // 著作类别
        copyright_category: "",
        // 著作权类型
        copyright_type: "",
        // 是否为国家规划教材
        national_planning_textbook: false,
        // 学科门类
        subject_classification: "",
        // 审批状态
        status: false,
        // 附件
        awardfile: "",
        // 备注
        remarks: "",
      },
      // 添加著作表单的验证规则对象
      workAddFormRules: {
        name: [{ required: true, message: "请输入著作名", trigger: "blur" }],
        author: [
          { required: true, message: "请输入著作作者", trigger: "blur" },
        ],
        author_type: [
          { required: true, message: "请输入作者类型", trigger: "blur" },
        ],
        affiliated_unit: [
          { required: true, message: "请输入著作所属单位", trigger: "blur" },
        ],
        publish: [
          { required: true, message: "请输入出版时间", trigger: "blur" },
        ],
        copyright_type: [
          { required: true, message: "请输入著作权类型", trigger: "blur" },
        ],
        copyright_category: [
          { required: true, message: "请输入著作类别", trigger: "blur" },
        ],
        subject_classification: [
          { required: true, message: "请输入学科门类", trigger: "blur" },
        ],
      },
      isUploadFile: false,
    };
  },
  methods: {
    // 选择学科分类选择
    handleSubject_classificationChange(val) {
      this.subject_classificationList.forEach((item) => {
        if (item.value == val[0]) {
          item.children.forEach((child) => {
            if (child.value == val[1]) {
              this.$set(
                this.workAddForm,
                "subject_classification",
                `${item.label}-${child.label}`
              );
            }
          });
        }
      });
    },
    // 监听著作作者input改变事件
    authorInputChange() {
      // 先变成数组 寻找到中文逗号改变成为英文逗号
      let cacheData = this.workAddForm.author.split("");
      // console.log(cacheData.indexOf("a"));
      cacheData.forEach((item, index) => {
        if (item === "，") {
          // console.log(item);
          cacheData[index] = ",";
        }
      });
      this.workAddForm.author = cacheData.join("");
      // console.log(this.workAddForm.author);
    },
    // 监听添加著作对话框的关闭事件
    handleWorkAddDialogClose() {
      this.addDialogVisible = false;
      // this.$refs.workAddFormRef.resetFields();
    },
    // 点击按钮，添加新著作
    handleWorkAddDialogConfirm() {
      this.$refs.workAddFormRef.validate(async (valid) => {
        if (!valid) return;
        if (!this.isUploadFile) return this.$message.warning("请上传文件");
        // 可以发起添加著作的网络请求
        const { data: res } = await this.$axios.post("/work", {
          workAddForm: this.workAddForm,
        });

        if (res.status == 200) {
          return this.$refs.workfileUploadRef.submit();
        } else {
          return this.$message.error(res.message);
        }
      });
    },
    // 著作上传检查
    checkType(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      fileList = [];

      if (fileType != "pdf") {
        this.$message.error("文件格式不正确");
        return false;
      }
      if (file.size / 1024 / 1024 > 20) {
        this.$message.error("文件大小不能超过52M");
        return false;
      }
      this.isUploadFile = true;
    },
    uploadSuccess() {
      this.$message.success("添加成功！");
      // 隐藏添加著作的对话框
      this.addDialogVisible = false;
      this.$bus.$emit("getAchievementList");
      this.handleWorkAddDialogClose();
    },
    handleWorkAddShow() {
      this.addDialogVisible = true;
    },
  },
  computed: {
    ...mapState([
      "subject_classificationList",
      "collegeList",
      "copyright_typeOption",
    ]),
  },
  mounted() {
    this.$bus.$on("handleWorkAddShow", this.handleWorkAddShow);
  },
  beforeDestroy() {
    this.$bus.$off("handleWorkAddShow");
  },
};
</script>

<style lang = "less" scoped>
// 添加著作对话框
.workAddDialog {
  /deep/.el-dialog {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

// 上传模块
.workUpload {
  /deep/.el-upload {
    width: 100%;
  }
  /deep/.el-upload-dragger {
    width: 100%;
  }
}
</style>